<template>
  <transition name="scale">
    <div v-show="state.showMessage" class="pMessage">
      {{ state.content }}
    </div>
  </transition>
</template>

<script setup>
import { reactive, ref } from "vue";

const state = reactive({
  content: "这是一个 message",
  duration: 1500,
  type: "primary",
  showMessage: false,
});
let messageTimer = null;
const open = () => {
  if (messageTimer) {
    clearTimeout(messageTimer);
    messageTimer = null;
  }
  handleColor(state.type);
  state.showMessage = true;
  messageTimer = setTimeout(() => {
    state.showMessage = false;
  }, state.duration);
};
const close = () => {
  if (messageTimer) {
    clearTimeout(messageTimer);
    messageTimer = null;
  }
  state.showMessage = false;
};
let hue = ref("");
let saturation = ref("");
let light = ref("");
const handleColor = (type) => {
  switch (type) {
    case "primary":
      hue.value = "204";
      saturation.value = "86%";
      light.value = "53%";
      break;
    case "success":
      hue.value = "85";
      saturation.value = "58%";
      light.value = "53%";
      break;
    case "error":
      hue.value = "10";
      saturation.value = "75%";
      light.value = "62%";
      break;
    case "warning":
      hue.value = "51";
      saturation.value = "93%";
      light.value = "54%";
      break;
    case "info":
      hue.value = "0";
      saturation.value = "0%";
      light.value = "83%";
      break;
  }
};
defineExpose({ state, open, close });
</script>

<style scoped>
.pMessage {
  --base_hue: v-bind(hue);
  --base_saturation: v-bind(saturation);
  --base_light: v-bind(light);
  color: #f3f3f3;
  font-size: 40px;
  font-weight: bold;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 35%;
  z-index: 999;
  background: hsl(var(--base_hue), var(--base_saturation), var(--base_light));
  box-shadow: inset 0px -30px hsl(var(--base_hue), var(--base_saturation), calc(var(
            --base_light
          ) + 20%));
}

.scale-enter-active,
.scale-leave-active {
  transition: 0.2s ease-out;
}

.scale-enter,
.scale-leave-to {
  transform: scale(2);
  opacity: 0;
}
</style>
